<template>
  <w-move-menu-btn
    class="mobile-com-menu-btn"
    :one="!dustbin">
    <add-icon
      @click="addBtnClick"
      style="padding: 10px"/>
    <remove-icon
      v-if="dustbin"
      @click="dustbinBtnClick"
      style="padding: 5px"/>
  </w-move-menu-btn>
</template>

<script>
  import WMoveMenuBtn from '@/components/mobile/moveMenuBtn'
  import AddIcon from '@/icons/add.svg'
  import RemoveIcon from '@/icons/remove.svg'
  export default {
    name: "MobileComMenuBtn",
    components: {
      WMoveMenuBtn,
      AddIcon,
      RemoveIcon
    },
    props: {
      dustbin: {
        type: Boolean,
        default: true
      },
      addRouter: {
        type: Object,
        default() {
          return null
        }
      },
      dustbinRouter: {
        type: Object,
        default() {
          return null
        }
      },
    },
    methods: {
      addBtnClick() {
        if (this.addRouter) {
          this.$router.push(this.addRouter)
        }
        this.$emit('addClick')
      },
      dustbinBtnClick() {
        if (this.dustbinRouter) {
          this.$router.push(this.dustbinRouter)
        }
        this.$emit('dustbinClick')
      }
    }
  }
</script>

<style scoped>

</style>
